<script type="text/javascript" src="<?=base_url()?>/js/jquery.dataTables.min.js"></script>
<h3 class="ui-widget-header widget-header ui-corner-all">Department Management</h3>
<div class="widget-content">
	<div class="input-staff-profile">
		<button class="btn-add-staff">Add Department</button>
		<button class="btn-delete-staff">Delete Department</button>
	</div>
	<table class="staff-list">
		<thead>
			<th>No</th>
			<th>Department</th>
			<th>Code Center</th>
			<th>Status</th>
			<th>Date Modified</th>
			<th><input name="select-all" class="select-all" type="checkbox"></th>
		</thead>
		<tfoot>
			<th>No</th>
			<th>Department</th>
			<th>Code Center</th>
			<th>Status</th>
			<th>Date Modified</th>
			<th></th>
		</tfoot>
		<tbody>
			<tr style="">
				<td>1</td>
				<td><a href="<?=base_url()?>index.php/hro/edit_depart/">Plant</a></td>
				<td class="center"></td>
				<td class="center">use</td>
				<td class="center">16/10/2012</td>
				<td class="center"><input name="select" class="select" type="checkbox"></td>
			</tr>
			<tr>
				<td>1.1</td>
				<td><a href="<?=base_url()?>index.php/hro/edit_depart/">CB</a></td>
				<td class="center">65</td>
				<td class="center">use</td>
				<td class="center">16/10/2012</td>
				<td class="center"><input name="select" class="select" type="checkbox"></td>
			</tr>
			<tr>
				<td>1.2</td>
				<td><a href="<?=base_url()?>index.php/hro/edit_depart/">Processing</a></td>
				<td class="center">67</td>
				<td class="center">use</td>
				<td class="center">16/10/2012</td>
				<td class="center"><input name="select" class="select" type="checkbox"></td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	$(".staff-list").dataTable({
		"bLengthChange": false,
        "sScrollY": "490",
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 100,
        "whitespace": "nowrap",
        "sDom": '<"toolbar">frtip',
        "aoColumns":[
        	{"sWidth": '10%'},
        	{"sWidth": '30%'},
        	{"sWidth": '20%'},
        	{"sWidth": '10%'},
        	{"sWidth": '10%'},
        	{"sWidth": '10%', "bSortable": false}
        ]
    });

    $(".staff-list tbody tr").each(function(){
    	$(this).mouseover(function(){
    		$(this).addClass("ui-state-active");
    	}).mouseout(function(){
    		$(this).removeClass("ui-state-active");
    	});
    });

    $(".input-staff-profile").appendTo(".toolbar");

    $("input[name=select-all]").click(function(){
    	if($("input[name=select-all]").is(":checked"))
    	{
    		$("input[name=select]").attr("checked", true);
    	}
    	else
    	{
    		$("input[name=select]").attr("checked", false);
    	}
    });

    //setup add button
    $(".btn-add-staff").button({
    	icons:{
    		primary: "ui-icon-plusthick"
    	}
    }).removeClass("ui-widget");

    //setup delete button
    $(".btn-delete-staff").button({
    	icons:{
    		primary: "ui-icon-trash"
    	}
    }).removeClass("ui-widget");

    $(".btn-add-staff").click(function(){
    	window.location = "<?=base_url()?>index.php/hro/add_depart/";
    });
</script>